<template>
  <div class="member-info-wrapper">
    <div class="member-info-left">
      <div class="user-info-dg">
        <div class="avatar-wrapper">
          <img
            :src="storeInfo.store_logo_img || require('@/assets/home/icon-store.png')"
            class="avatar"
          />
          <upload
            title="点击更换LOGO"
            class="edit"
            writing
            :image.sync="storeInfo.store_logo_img"
            @image-success="imageSuccess"
          />
          <!-- <img :src="require('@/assets/home/icon-store.png')" class="avatar" /> -->
        </div>
        <div class="info-dg-text">
          <div class="name">
            <span v-if="storeInfo.store_name" class="text">{{storeInfo.store_name}}</span>
            <span v-else>店铺还没有名字</span>
            <span class="svg-container" @click="editStoreName">
              <svg-icon icon-class="icon-edit" />
            </span>
          </div>
          <div class="desc">
            <span
              v-if="storeInfo.store_detail"
              class="text"
              :title="storeInfo.store_detail"
            >{{storeInfo.store_detail}}</span>
            <span v-else class="text">店铺还没有简介</span>
            <span class="svg-container" @click="editStoreDesc">
              <svg-icon icon-class="icon-edit" />
            </span>
          </div>

          <div class="goods-totle">
            <p>
              商品总数：
              <span>{{storeInfo.store_agent_product || 0}}</span>
            </p>
          </div>

          <el-popover class="shop-spread" placement="bottom-start" width="305" trigger="click">
            <div class="shop-spread-content">
              <div class="spread-qrCode">
                <vue-qr
                  v-if="storeInfo.store_url"
                  :logoSrc="qrCodeUrl"
                  :text="storeInfo.store_url"
                  :size="200"
                ></vue-qr>
                <div class="qrCode-text">
                  <span class="text-item" @click="downsVercode($event)">保存二维码</span>
                </div>
              </div>
              <div class="shop-url">
                <a
                  :href="storeInfo.store_url"
                  target="_blink"
                  :title="storeInfo.store_url"
                >{{storeInfo.store_url}}</a>
                <span
                  class="text-item text-item2"
                  @click="handleClipboard(storeInfo.store_url,$event)"
                >复制链接</span>
              </div>
            </div>
            <el-button slot="reference">推广店铺</el-button>
          </el-popover>
        </div>
      </div>

      <div class="block-wrapper">
        <!-- <el-button type="primary" class="extension">推广店铺</el-button> -->
        <!-- <el-popover class="shop-spread" placement="bottom-start" width="305" trigger="click">
          <div class="shop-spread-content">
            <div class="spread-qrCode">
              <vue-qr
                v-if="storeInfo.store_url"
                :logoSrc="qrCodeUrl"
                :text="storeInfo.store_url"
                :size="200"
              ></vue-qr>
              <div class="qrCode-text">
                <span class="text-item" @click="downsVercode($event)">保存二维码</span>
              </div>
            </div>
            <div class="shop-url">
              <a
                :href="storeInfo.store_url"
                target="_blink"
                :title="storeInfo.store_url"
              >{{storeInfo.store_url}}</a>
              <span
                class="text-item text-item2"
                @click="handleClipboard(storeInfo.store_url,$event)"
              >复制链接</span>
            </div>
          </div>
          <el-button slot="reference">推广店铺</el-button>
        </el-popover>-->
        <!-- <div class="block">
          <p>{{storeInfo.agent_time | parseTime}}</p>
          <p>
            <span class="state">正式成为代理商</span>
          </p>
        </div>-->
        <!-- <div class="block block-dl">
          <p>
            <span class="count">{{storeInfo.store_agent_product || 0}}</span>个
          </p>
          <p>代理商品</p>
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import { doStoreChange } from "@/api/homepage";
import clipboard from "@/utils/clipboard";
import vueQr from "vue-qr";
import upload from "@/components/UploadImage/UploadImage";
export default {
  props: {
    storeInfo: {
      type: Object
    }
  },
  components: {
    vueQr,
    upload
  },
  data() {
    return {
      qrText: "",
      // qrCodeUrl: require("../../../assets/home/icon-logo.png")
      qrCodeUrl: "",
      // storeInfo:{
      //   store_name:'',
      //   store_detail:''
      // },
      newAvatarPath: ""
    };
  },
  created() {
    // this.qrCodeUrl = this.storeInfo.store_logo_img
  },

  methods: {
    // 上传头像
    imageSuccess(obj) {
      // console.log(obj.url);
      doStoreChange({
        store_id: this.storeInfo.store_id,
        store_logo_img: obj.url
      }).then(res => {
        this.$message({
          type: "success",
          message: "店铺LOGO修改成功"
        });
        // location.reload();
        this.$emit("getStoreInfo");
      });
    },
    // 保存二维码
    downsVercode(e) {
      let src = e.currentTarget.parentElement.previousElementSibling.src;
      // console.log("图片路径", src);
      this.downloadIamge(src, "shopVercode");
    },
    downloadIamge(imgsrc, name) {
      // console.log("保存二维码参数", imgsrc, name);
      //下载图片地址和图片名
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "shopVercode"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
      this.$message.success("二维码已保存到本地");
    },

    // 复制链接
    handleClipboard(text, event) {
      clipboard(text, event);
    },
    editStoreName() {
      this.$prompt("请输入新店铺名称", "修改店铺名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{3,12}$/,
        inputErrorMessage: "店铺名称最少3个字符，最多12个字符",
        inputValue: this.storeInfo.store_name ? this.storeInfo.store_name : "",
        closeOnClickModal: false
      })
        .then(({ value }) => {
          if (value == this.storeInfo.store_name) {
            // this.$message.warning ("店铺名未改变");
            return false;
          } else {
            doStoreChange({
              store_id: this.storeInfo.store_id,
              store_name: value
            }).then(res => {
              this.storeInfo.store_name = value;
              this.$message({
                type: "success",
                message: "你的店铺名字修改为: " + value
              });
            });
          }
        })
        .catch(() => {});
    },
    editStoreDesc() {
      this.$prompt("请输入店铺简介", "修改店铺简介", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{0,30}$/,
        inputErrorMessage: "店铺简介不可超过30个字符",
        inputValue: this.storeInfo.store_detail
          ? this.storeInfo.store_detail
          : "",
        closeOnClickModal: false
      })
        .then(({ value }) => {
          if (value == this.storeInfo.store_detail) {
            // this.$message.warning ("店铺名未改变");
            return false;
          } else {
            doStoreChange({
              store_id: this.storeInfo.store_id,
              store_detail: value
            }).then(res => {
              this.storeInfo.store_detail = value;
              this.$message({
                type: "success",
                message: "你的店铺介绍修改为: " + value
              });
            });
          }
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss">
.shop-spread-content {
  color: #999;
  font-size: 14px;
  margin: 15px 0;
  .text-item {
    text-decoration: underline;
    cursor: pointer;
    margin-left: 30px;
    &.text-item2 {
      margin-left: 0;
    }
  }
  .spread-qrCode {
    display: flex;
    width: 200px;
    margin: 0 auto;
    img {
      width: 100px;
      height: 100px;
    }
    .qrCode-text {
      line-height: 100px;
    }
  }
  .shop-url {
    width: 200px;
    margin: 0 auto;
    margin-top: 10px;
    padding-left: 8px;
    a {
      width: 135px;
      max-width: 135px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
    }
  }
}

.avatar-wrapper {
  .edit {
    .el-upload--text {
      width: 100%;
      height: 100%;
    }
  }
}

.user-info-dg {
  .el-loading-mask {
    .el-loading-spinner {
      margin-top: 0;
      transform: translateY(-50%);
      .el-icon-loading {
        font-size: 16px;
      }
      .el-loading-text {
        font-size: 12px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.member-info-wrapper {
  vertical-align: top;
  font-size: 12px;
  background: #fff;
  position: relative;
  width: 55%;
  &::before {
    content: "";
    width: 6px;
    height: 100%;
    background: #4bc5c3;
    border-radius: 0 8px 8px 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  &::after {
    content: "";
    width: 1px;
    height: 180px;
    background: #ebf0f2;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .member-info-left {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    .user-info-dg {
      display: flex;
      padding-bottom: 34px;
      .avatar-wrapper {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
        position: relative;
        .avatar {
          width: 100%;
          height: 100%;
        }
        .edit {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
        }
      }
      .info-dg-text {
        text-align: left;
        margin: auto 0;
        .name {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin: 10px 0;
        }
        .desc {
          font-size: 14px;
          color: #ababab;
          margin-top: 6px;
          min-height: 20px;
          display: flex;
          max-width: 200px;
          .text {
            word-break: break-word; /* 文本行的任意字内断开 */
            word-wrap: break-word; /* IE */
            white-space: -moz-pre-wrap; /* Mozilla */
            white-space: -hp-pre-wrap; /* HP printers */
            white-space: -o-pre-wrap; /* Opera 7 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: pre; /* CSS2 */
            white-space: pre-wrap; /* CSS 2.1 */
            white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 18px;
          }
        }
        .goods-totle {
          font-size: 14px;
          color: #ababab;
          span {
            color: #ed6c44;
          }
        }
        .shop-spread {
          position: relative;
          top: 30px;
          .el-button {
            border: none;
            background: #ff6f47;
            font-size: 14px;
            color: #fff;
            width: 90px;
            height: 30px;
            line-height: 26px;
            padding: 0;
            &:hover {
              background: #ff7f5b;
            }
          }
        }
      }
    }
  }

  .extension {
    width: 90px;
    height: 30px;
    line-height: 26px;
    padding: 0;
    margin: auto 0;
    background: #ff6f47;
    &:hover {
      background: #ff7f5b;
    }
  }
  .edit {
    width: 116px;
    height: 26px;
    line-height: 26px;
    border-radius: 12px;
    border: 1px solid #ff8908;
    color: #ff8908;
    text-align: center;
    margin: 6px auto 0;
  }

  .block-wrapper {
    display: flex;
    .shop-spread {
      margin: auto 0;
      .el-button {
        border: none;
        background: #ff6f47;
        font-size: 14px;
        color: #fff;
        width: 90px;
        height: 30px;
        line-height: 26px;
        padding: 0;
        &:hover {
          background: #ff7f5b;
        }
      }
    }
    .block {
      padding: 0 20px;
      &.block-dl {
        text-align: center;
        position: relative;
        &::after {
          content: "";
          width: 1px;
          height: 50px;
          background: #ebf0f2;
          position: absolute;
          top: 1px;
          left: 0px;
        }
      }

      p {
        font-size: 14px;
        color: #999;
        line-height: 20px;
        margin: 0;
        &:first-child {
          margin-bottom: 10px;
        }
        .count {
          color: #fa4e33;
          font-size: 20px;
          font-weight: bold;
        }
        .state {
          color: #4bc5c3;
        }
      }
    }
  }
  .svg-container {
    margin-left: 10px;
    .svg-icon {
      font-size: 14px;
      color: #ff7f5b;
      cursor: pointer;
      &:hover {
        color: #ff7f5b;
      }
    }
  }
}
</style>
